<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/clear.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <div class="wrap" id="wrap">
      <div class="slide">
        <ul>
          <li><img src="./imgs/banner.jpg" alt="" /></li>
          <li><img src="./imgs/banner.jpg" alt="" /></li>
          <li><img src="./imgs/banner.jpg" alt="" /></li>
          <li><img src="./imgs/banner.jpg" alt="" /></li>
          <li><img src="./imgs/banner.jpg" alt="" /></li>
        </ul>
      </div>
      <div class="arrow">
        <a href="javascript:;" class="prev"></a>
        <a href="javascript:;" class="next"></a>
      </div>
    </div>

    <script src="./js/javascript.js"></script>
    <script>
      //设置数组 ，数组中存放图片的样式
      var json = [
        {
          width: 400,
          top: 130,
          left: 0,
          opacity: 30,
          zIndex: 1,
        },
        {
          width: 600,
          top: 70,
          left: 80,
          opacity: 60,
          zIndex: 2,
        },
        {
          width: 800,
          top: 0,
          left: 200,
          opacity: 100,
          zIndex: 3,
        },
        {
          width: 600,
          top: 70,
          left: 520,
          opacity: 60,
          zIndex: 2,
        },
        {
          width: 400,
          top: 130,
          left: 800,
          opacity: 30,
          zIndex: 1,
        },
      ];
      var wrap = document.getElementById("wrap");
      var lis = wrap.firstElementChild.children[0].children;
      var arrows = wrap.lastElementChild;
      var arrow = wrap.lastElementChild.children;

      for (var i = 0; i < lis.length; i++) {
        animate(lis[i], json[i]);
      }

      //按钮显示
      wrap.onmouseover = function () {
        animate(arrows, { opacity: 100 });
      };

      wrap.onmouseout = function () {
        animate(arrows, { opacity: 0 });
      };

      //按钮遍历
      var flag = true;
      for (var k in arrow) {
        arrow[k].onclick = function () {
          if (flag) {
            flag = false;
            if (this.className == "prev") {
              json.unshift(json.pop());
            } else {
              json.push(json.shift());
            }
            for (var i = 0; i < lis.length; i++) {
              animate(lis[i], json[i], function () {
                flag = true;
              });
            }
          }
        };
      }
    </script>
  </body>
</html>
